<html>
<head>
    <style>
        body{
            background:white;
            margin:0;
            padding:0;
        }
        #show{
            width:100%;
            height:100%;
        }
        img{
            max-width:100%;
            border-radius:5px;
        }
        video{
            max-width:100%;
            border-radius:5px;
        }
    </style>
    <script>
    window.onload = function () {
        var mdValue = document.getElementById("md-area").value;
        var converter = new showdown.Converter();
        var html = converter.makeHtml(mdValue);
        document.getElementById("show").innerHTML = html;
    }
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://www.westudy.ltd/js/showdown.min.js"></script>
    <link rel="dns-prefetch" href="//cdn.mathjax.org" />
    <script type="text/x-mathjax-config" src="http://www.westudy.ltd/js/mathjax-config.js"></script>
    <script src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<textarea id="md-area" style="display:none">####</textarea>
<div id="show"></div>
</html>